<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">

</head>
<style>
    table.gridtable {
        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
        width: 100%;
    }

    table.gridtable th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #dedede;
        white-space: nowrap !important;
    }

    table.gridtable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #ffffff;
    }
</style>
<body>
<div id="app">
    <el-container>

        <el-main>
           <a><img src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/productDesk/image/logo.png" style="width: 50%"/>订货清单 </a>
            <table class="gridtable">
                <tr>
                    <td style="width: 50%">订单编号：{{orderBill_id}}</td>
                    <td style="width: 50%">创建时间：{{crtTime}}</td>
                </tr>
                <tr>
                    <td style="width: 50%">订单总额：{{price}}</td>
                    <td style="width: 50%">供应链联系人：{{buyer}}</td>
                </tr>
                <tr>
                    <td style="width: 50%">客户联系人：{{user_name}}</td>
                    <td style="width: 50%">客户名称：{{userGroup_name}}</td>
                </tr>
                <tr>
                    <td style="width: 50%">备注：{{remark}}</td>
                    <td style="width: 50%"></td>
                </tr>
                <tr>
                    <td style="width: 50%">收货人联系方式：{{consignee_information}}</td>
                    <td style="width: 50%">收货地址：{{consignee_address}}</td>
                </tr>
            </table>
            <table class="gridtable" style="text-align: center">
                <tr>
                    <th>材料编码</th>
                    <th>材料名称</th>
                    <th>品牌</th>
                    <th>单位</th>
                    <th>属性</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>到货时间</th>
                    <th>备注</th>
                </tr>
                <tr v-for="sku in tableData">
                    <td style="width: 15%">{{sku.skuCode}}</td>
                    <td style="width: 15%">{{sku.skuName}}</td>
                    <td style="width: 10%">{{sku.skuBrand}}</td>
                    <td style="width: 10%">{{sku.skuUnit}}</td>
                    <td style="width: 15%">{{sku.modelAndParam}}</td>
                    <td style="width: 8%">{{sku.skuPrice}}</td>
                    <td style="width: 7%">{{sku.purNum}}</td>
                    <td style="width: 10%">{{sku.arriveTime}}</td>
                    <td style="width: 10%">{{sku.sku_remark}}</td>
                </tr>
            </table>
            <table class="gridtable" style="text-align: center">
                <tr>
                    <td style="width: 50%">合计：</td>
                    <td style="width: 50%">{{price}}</td>
                </tr>
            </table>
        </el-main>
    </el-container>

</div>
</body>
</html>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                user_id: '',
                user_name: '',
                orderBill_customStat: "",
                order_name: "",
                orderBill_id: "${orderNo}",
                crtTime: "",
                price: "",
                buyer: "",
                remark: "",
                consignee_information: "",
                consignee_address: "",
                contact: "",
                userGroup_name: "",
                tableData: [],
                response_data: "",
                sku_sum_price: 0,
                transport_price: 0,//运费价格
                discount: 0,//优惠价格
                sales_order_price: 0,
                orderBill_customStat: '',
                orderBean_pk: '${orderBean_pk}',
            }
        },
        //实时计算
        computed: {
            //计算商品总额
            sumPrice() {
                let sumPrice = 0;
                this.tableData.forEach((item) => {
                    sumPrice += Number(item.skuPrice) * Number(item.purNum);
                });
                this.sku_sum_price = sumPrice;
                return sumPrice;
            },
            //计算订单总额
            salesOrderPrice() {
                let salesOrderPrice = 0;
                salesOrderPrice = Number(this.sku_sum_price) + Number(this.transport_price) - Number(this.discount);
                this.sales_order_price = salesOrderPrice.toFixed(2);
                return salesOrderPrice;
            }
        },
        methods: {
            ajaxFunction() {
                var resultData = "";
                $.ajax({
                    url: '/order/orderDetail.json',
                    type: 'POST',
                    data: {orderNo: this.orderBill_id, orderBean_pk: this.orderBean_pk},
                    // contentType: "application/json",
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        if (result.ret) {
                            resultData = result.data;//数据记录
                        }
                    }
                });
                console.log(resultData);
                this.orderBill_customStat = resultData.orderBill_customStat;
                this.showDetailMsg(resultData);
            },
            showDetailMsg(resultData) {
                this.response_data = resultData;
                this.order_name = resultData.order_name;
                this.orderBill_id = resultData.orderBill_id;
                this.orderBean_pk = resultData.orderBean_pk;
                this.crtTime = resultData.crtTime;
                this.orderBill_customStat = resultData.orderBill_customStat;
                this.price = resultData.price;
                this.userGroup_name = resultData.userGroup_name;
                this.buyer = resultData.buyer;
                this.remark = resultData.remark;
                this.consignee_information = resultData.consignee_information;
                this.consignee_address = resultData.consignee_address;
                this.transport_price = resultData.transport_price;//运费
                this.discount = resultData.discount;//折扣
                this.contact = resultData.consignee_phone;
                var orderDetailList = resultData.context;
                var arr_table = new Array();
                for (var i = 0; i < orderDetailList.length; i++) {

                    var map = orderDetailList[i];
                    var obj_table = new Object();
                    obj_table.skuCode = map.sku_code;
                    obj_table.skuName = map.sku_name;
                    obj_table.skuBrand = map.sku_brand;
                    obj_table.skuModel = map.sku_model;
                    obj_table.skuUnit = map.sku_unit;
                    obj_table.modelAndParam = map.sku_slug_set;
                    obj_table.arriveTime = map.arriveTime;
                    obj_table.skuPrice = map.sku_contract_price;
                    obj_table.purNum = map.purNum;
                    obj_table.supplyCycle = map.supplyCycle;
                    obj_table.sku_remark = map.sku_remark;
                    arr_table.push(obj_table);
                }
                this.tableData = arr_table;
                this.user_id = resultData.user_id;
                var user_name = this.user_name;
                $.ajax({
                    url: '/user/queryUser',
                    type: 'get',
                    data: {userId: resultData.user_id},
                    // contentType: "application/json",
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        user_name = result.user_name;
                    }
                });
                this.user_name = user_name;
            }
        },
        /** 初始化参数的时候使用 */
        async mounted() {
            this.ajaxFunction();

        }
    });

</script>
<#--<script type="text/javascript" src="/base/js/salesOrderDetail.js"></script>-->


